<template>
  <el-card class="box-card" style="background-color: rgba(255, 255, 255, 0.4)">
    <template #header>
      <div class="card-header">
        <span>邮件</span>
      </div>
    </template>
    <!-- 消息 -->
    <el-collapse accordion>
      <el-collapse-item
        v-for="(item, index) in systemList"
        :key="index"
        :class="
          item.core == 3
            ? 'email_item_L'
            : item.core == 2
            ? 'email_item_F'
            : 'email_item_S'
        "
      >
        <template #title>
          <div class="titleMsg">
            <span :class="item.isRead ? 'iconInfo' : 'icon'"></span>
            <span class="message">{{
              item.core == 1
                ? "系统邮件"
                : item.core == 2
                ? "用户邮件"
                : "结缘邮件"
            }}</span>
          </div>
        </template>
        <div class="content">
          <div class="font">{{ item.title }}</div>
          <div class="info">
            <div>
              <span @click="lookFun(item)" style="color:#67C23A;cursor:pointer"
                >【查看】</span
              >
              <span
                @click="replyFun(item)"
                style="color:#E6A23C;cursor:pointer"
                v-if="!item.reply || !(item.core == '1')"
                >【回复】</span
              >
              <span
                @click="readFun(item)"
                style="color:#909399;cursor:pointer"
                v-if="!item.isRead"
                >【已读】</span
              >
              <span
                @click="deleteFun(item)"
                style="color:#F56C6C;cursor:pointer"
                class="delete"
                >【删除】</span
              >
            </div>
            <div class="infoBottom">{{ item.createTime }}</div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-card>

  <!-- 查看邮件 -->
  <el-dialog :title="emailDetails.title" v-model="emailHide" width="40%" center>
    <div style="font-size:18px;align-height:24px;font-family:'kaiti'">
      <div style="text-indent:36px;">{{ emailDetails.content }}</div>
      <div style="display:flex;justify-content:flex-end;margin-top:40px;">
        {{ emailDetails.sendUser }}
      </div>
      <div style="display:flex;justify-content:flex-end;">
        {{ emailDetails.createTime }}
      </div>
    </div>
    <div style="display:flex;justify-content: flex-end;margin-top:30px;">
      <span
        style="display:inline-block;padding:6px 12px;border:1px solid black;border-radius:6px;font-weight:700;margin-left:10px;"
        v-if="emailDetails.core == 3"
        @click="loveFun(emailDetails)"
        >接受</span
      >
      <span
        style="display:inline-block;padding:6px 12px;border:1px solid black;border-radius:6px;font-weight:700;margin-left:10px;"
        v-if="emailDetails.core == 3"
        @click="rejectFun(emailDetails)"
        >拒绝</span
      >
      <span
        style="display:inline-block;padding:6px 12px;border:1px solid black;border-radius:6px;font-weight:700;margin-left:10px;"
        v-if="emailDetails.core != 1"
        @click="replyFun(emailDetails)"
        >回复</span
      >
      <span
        style="display:inline-block;padding:6px 12px;border:1px solid black;border-radius:6px;font-weight:700;margin-left:10px;"
        @click="deleteFun(emailDetails)"
        >删除</span
      >
    </div>
  </el-dialog>
</template>

<script>
import emailListJS from "./emailList.js";
import { toRefs, onMounted } from "vue";
export default {
  name: "emailList",
  setup() {
    let {
      status,
      methodFun: {
        getSysList,
        readFun,
        replyFun,
        deleteFun,
        lookFun,
        rejectFun,
        loveFun,
      },
    } = emailListJS();
    let { systemList, findData, emailHide, emailDetails } = toRefs(status);
    //    生命周期
    onMounted(() => {
      getSysList();
    });
    return {
      readFun,
      deleteFun,
      replyFun,
      lookFun,
      rejectFun,
      loveFun,
      systemList,
      findData,
      emailHide,
      emailDetails,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.el-collapse-item__header {
  background-color: transparent;
}
/deep/.el-collapse-item__wrap {
  background-color: transparent;
}
.email_item_L {
  background-image: url("../../../../static/images/email_meet_l.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.email_item_F {
  background-image: url("../../../../static/images/email_meet_f.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.email_item_S {
  background-image: url("../../../../static/images/email_meet_s.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content {
  padding: 0px 30px;
  display: flex;
  align-items: center;
  .font {
    flex: 1;
  }
  .info {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }
}
.titleMsg {
  padding-left: 12px;
  .icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: tomato;
  }
  .iconInfo {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #999;
  }
  .message {
    margin-left: 16px;
  }
}
.lookEmail {
  .center {
    font-size: 18px !important;
    line-height: 24px !important;
    font-family: "kaiti" !important;
  }
  .core {
    display: flex;
    justify-content: center;
    span {
      display: inline-block;
      padding: 6px 12px;
      border: 1px solid black;
    }
  }
}
</style>
